<script lang="ts" setup>
import { ref, onActivated } from 'vue';
import { $fetch } from '@/settings/utils/fetch';
import useNotification from '@/settings/hooks/notification';
import { useI18n } from 'vue-i18n';
import {
  useStatusList,
  OPERATE_STATUS_ON,
  OPERATE_STATUS_OFF,
  operateTypeMap,
} from './use';

const props = defineProps({
  pageType: {
    type: String,
    default: 'banner',
  },
});

const listing = ref([]);
const pager = ref({});
const loading = ref(false);
const search = ref();
const { success } = useNotification();
const { t } = useI18n();

const form = ref({
  queryColumn: 0,
  keyWord: '',
});

const queryColumnList = {
  0: t('settings.view.operation.index.status.0'),
  1: t('settings.view.operation.index.status.1'),
  2: t('settings.view.operation.index.status.2'),
  3: t('settings.view.operation.index.status.3'),
  5: t('settings.view.operation.index.status.5'),
}

const statusList = useStatusList();

const operateType = operateTypeMap[props.pageType];

const refresh = async (page = 1) => {
  const { isSuccess, data } = await $fetch('/admin/operator/queryPageOperatorList', {
    method: 'post',
    data: {
      operateType,
      operateName: form.value.keyWord,
      showStatus: form.value.queryColumn,
      pageNum: page,
      pageSize: 20,
    },
    loadingStatus: loading,
  });
  if (isSuccess) {
    listing.value = data.records;

    pager.value = {
      current: page,
      total: data.total,
    };
  }
}

const remove = async (id: string) => {
  const { isSuccess } = await $fetch('/admin/operator/deleteOperator', {
    method: 'post',
    data: {
      operateType,
      operatorId: id,
    },
    loadingStatus: loading,
    json: false,
  });

  if (isSuccess) {
    success(t('settings.notification.del'));
    search.value.refresh();
  }
};

const changeStatus = async (id: string, status: number) => {
  const { isSuccess } = await $fetch('/admin/operator/onOffLine', {
    method: 'post',
    data: {
      operateType,
      operateId: id,
      open: status,
    },
    loadingStatus: loading,
  });

  if (isSuccess) {
    success(t('settings.notification.success'));
    search.value.refresh();
  }
};

onActivated(() => {
  search.value.refresh('reset');
});
</script>

<template>
  <OpenPageSection>
    <OpenSearchTable :pager="pager" :data="listing" :loading="loading" @search="refresh" ref="search">
      <template #search-before>
        <div class="mb-20px">
          <ARadioGroup v-model="form.queryColumn" @change="refresh()">
            <ARadio v-for="(item, index) in queryColumnList" :key="index" :value="Number(index)">
              <template #radio="{ checked }">
                <ATag :checked="checked" size="large" color="arcoblue" checkable>{{ item }}</ATag>
              </template>
            </ARadio>
          </ARadioGroup>
        </div>
      </template>

      <template #header>
        <AFormItem :label="$t('settings.view.journalism.index.header1')">
          <AInput v-model="form.keyWord" allow-clear />
        </AFormItem>
      </template>

      <template #header-button>
        <OpenRouterButton :to="`/operator/${props.pageType}/add`" type="primary">{{ $t('settings.action.add') }}</OpenRouterButton>
      </template>

      <template #columns>
        <!-- <ATableColumn title="ID" data-index="operateId" :width="150" /> -->
        <ATableColumn :title="$t('settings.view.operation.index.column3')" header-cell-class="w-10%">
          <template #cell="{ record }">
            <OpenImage :src="record.picUrl" img-class="w-full h-80px object-cover" />
          </template>
        </ATableColumn>
        <ATableColumn :title="$t('settings.view.operation.index.column1')" data-index="operateName" tooltip ellipsis />

        <ATableColumn :title="$t('settings.view.operation.index.column2')" data-index="jumpUrl" tooltip ellipsis>
          <template #cell="{ record }">
            <a :href="record.jumpUrl" target="_blank">{{ record.jumpUrl }}</a>
          </template>
        </ATableColumn>

        <ATableColumn :title="$t('settings.view.operation.index.column4')">
          <template #cell="{ record }">
            {{ record.showStatus === 4 ? $t('settings.view.operation.index.status.4') : `${record.showStartTime} - ${ record.showEndTime}` }}
          </template>
        </ATableColumn>

        <ATableColumn :title="$t('settings.view.journalism.index.column6')" :width="100">
          <template #cell="{ record }">
            <div v-if="record.open == 1">
              <ATag v-if="record.showStatus == 1" color="blue">{{ statusList[1] }}</ATag>
              <ATag v-else-if="record.showStatus == 2">{{ statusList[2] }}</ATag>
              <ATag v-else-if="record.showStatus == 3">{{ statusList[3] }}</ATag>
              <ATag v-else-if="record.showStatus == 4" color="blue">{{ statusList[1] }}</ATag>
            </div>
            <div v-else>
              <ATag>{{ $t('settings.view.operation.index.status.5') }}</ATag>
            </div>
          </template>
        </ATableColumn>

        <ATableColumn :title="$t('settings.view.operation.index.column5')" data-index="sort" :width="150" />

        <ATableColumn :title="$t('settings.view.operation.index.column7')" header-cell-class="w-12%">
          <template #cell="{ record }">
            <div class="button-actions">
              <OpenRouterButton
                size="small" :to="`/operator/${props.pageType}/edit/${record.operateId}`"
              >
                {{ $t('settings.action.edit') }}
              </OpenRouterButton>
              <AButton
                status="danger" size="small" v-confirm
                @click="changeStatus(record.operateId, OPERATE_STATUS_OFF)"
                v-if="record.open == OPERATE_STATUS_ON"
              >
                {{ $t('settings.action.downline') }}
              </AButton>
              <AButton
                type="primary" size="small" v-confirm
                @click="changeStatus(record.operateId, OPERATE_STATUS_ON)"
                v-if="record.open == OPERATE_STATUS_OFF"
              >
                {{ $t('settings.action.publish') }}
              </AButton>
              <AButton
                type="primary" status="danger" size="small" v-confirm
                @click="remove(record.operateId)"
              >
                {{ $t('settings.action.delete') }}
              </AButton>
            </div>
          </template>
        </ATableColumn>
      </template>
    </OpenSearchTable>
  </OpenPageSection>
</template>

<style lang="scss" scoped>
</style>
